window.addEventListener("load", function () {
	//【头部的移入效果】
	//思路:1.先获取相关节点
	const menuNodes = $(".navMenu li");
	//console.log(menuNodes);  //一个li的伪数组
	//2.遍历相关节点,每遍历一次产生一次移入和移出效果
	menuNodes.forEach(function (v) {
		// console.log(v);  //v是每个对应的li
		v.addEventListener("mouseover", function () {
			menuNodes.forEach(function (each) {
				// 移入到自己时,将所有激活样式清空
				each.className = "";
			});
			// 再给自己增加激活样式
			v.className = "active";
			
				
		});
	});

	//【banner区的轮播图】
	// this.window.alert("测试引入情况")
	var mySwiper = new Swiper(".swiper", {
		autoplay: true,
		pagination: {
			el: ".swiper-pagination",
			clickable: true,
		},
	});
	new Swiper(".swiper");
	var mySwiper = this.document.querySelector(".swiper").swiper;
	// mySwiper.slidenext();
	//【开发者区域渲染】
	let lopArr = [
		{
			imgUrl: "../imgs/service01.svg",
			titleTxt: "API私有化服务",
			info: "可部署本地&专有云的Web Api",
		},
		{
			imgUrl: "../imgs/service02.svg",
			titleTxt: "源码云检测",
			info: "可部署本地&专有云的Web Api",
		},
		{
			imgUrl: "../imgs/service03.svg",
			titleTxt: "源码有云",
			info: "可部署本地&专有云的Web Api",
		},
		{
			imgUrl: "../imgs/service04.svg",
			titleTxt: "YuanMa API",
			info: "可部署本地&专有云的Web Api",
		},
	];
	let lopHtml = "";
	lopArr.forEach((v, i) => {
		// console.log(v);
		lopHtml += `<li class="liHover">
		<img src="${v.imgUrl}" alt="图片已损坏" />
		<h5>${v.titleTxt}</h5>
		<p>${v.info}</p>
		<a href="#">去搜索</a>
	</li>`;
	});
	// console.log(lopHtml);
	document.querySelector("#service").innerHTML = lopHtml;

	//【开发者区域的移入效果】
	//思路:1.获取相关节点未数组
	// $("#service li")
	// console.log($("#service li"));
	//2.遍历相关节点移入的时候背景变蓝,字体变白
	$("#service li").forEach(function (v) {
		v.addEventListener("mouseover", function () {
			v.style.backgroundColor = "rgba(18, 113, 239,.2)";
			
		});
		v.addEventListener("mouseout", function () {
			v.style.backgroundColor = "#fff";
			
		});

	});
	/* 【api服务区渲染】 */
	let apiArr = [
		{
			apiImgUrl: "../imgs/api01.svg",
			apiInfo: "生活服务",
		},
		{
			apiImgUrl: "../imgs/api02.svg",
			apiInfo: "生活服务",
		},
		{
			apiImgUrl: "../imgs/api03.svg",
			apiInfo: "生活服务",
		},
		{
			apiImgUrl: "../imgs/api04.svg",
			apiInfo: "生活服务",
		},
		{
			apiImgUrl: "../imgs/api05.svg",
			apiInfo: "生活服务",
		},
		{
			apiImgUrl: "../imgs/api06.svg",
			apiInfo: "生活服务",
		},
		{
			apiImgUrl: "../imgs/api07.svg",
			apiInfo: "生活服务",
		},
		{
			apiImgUrl: "../imgs/api08.svg",
			apiInfo: "生活服务",
		},
		{
			apiImgUrl: "../imgs/api09.svg",
			apiInfo: "生活服务",
		},
		{
			apiImgUrl: "../imgs/api10.svg",
			apiInfo: "生活服务",
		},
	];
	let apiHtml = "";
	apiArr.forEach((v, i) => {
		apiHtml += `<li class="liHover">
		<img src="${v.apiImgUrl}" alt="图片已损坏" class="ptb-35-10 b-box">
		<p>${v.apiInfo}</p>
	</li>`;
	});
	document.querySelector("#apiList").innerHTML = apiHtml;
	/*【 api服务区移入效果】 */
	//思路:1.先获取相关节点
	//  $("#apiList li")
	//2.遍历相关节点伪数组
	let oldImgUrl = ""; //提升变量
	$("#apiList li").forEach(function (v) {
		// console.log(v);
		//3.遍历每一次值v都产生一次移入和移出效果
		v.addEventListener("mouseover", function () {
			//3.1移入后背景变成蓝色
			this.style.backgroundColor = "#2f7ee9";
			//3.2移入后颜色变白
			this.style.color = "#fff";
			//3.3移入后切换图片 ,等于在src里面的api01.svg变成api01-c.svg
			let imgUrl = this.firstElementChild.src; //先找到这个scr
			// lastIndexof(".")
			//3.3.1切换图片要先截取src中的.svg
			let str = imgUrl.slice(imgUrl.lastIndexOf("."));
			// console.log(str);
			//3.3.2在用-c.svg 替换(replace)  .svg
			this.firstElementChild.src = imgUrl.replace(str, "-c.svg");
			oldImgUrl = imgUrl;
		});
		v.addEventListener("mouseout", function () {
			//3.2移出后背景变白
			this.style.backgroundColor = "#fff";
			//3.2移出后字体颜色黑的
			this.style.color = "#000";
			//3.2移出后图片切回原来
			this.firstElementChild.src = oldImgUrl;
		});
	});

	//【慧灵区移入变大】
	
	//【独角兽区轮播图】
	// 思路:将多个图文结构叠在一个区域,每隔3秒让其中一个显示,其他的不显示
	// 1.先获取相关节点
	const unAgain = $(".unicornAgain");
	// console.log($(".unicornAgain"));
	//2.设置第一次显示的时候出现索引0的透明度是1
	unAgain[0].style.opacity = "1";
	// console.log(unAgain[0]);
	let index = 1;
	// 3.设置周期定时器,每3秒循环一次
	this.window.setInterval(function () {
		//运用排他思想,不管是谁显示,每个周期都先让所有消失
		//3.定义变量做循坏节点伪数组,遍历一次 ++一次
		unAgain.forEach((v) => {
			v.style.opacity = "0";
		});
		//通过索引显示对应内容,其他不变
		unAgain[index].style.opacity = "1";
		//设置索引变量,每隔一个周期就++
		index++;
		//当索引达到最大限度时要恢复初始状态
		if (index > unAgain.length - 1) {
			index = 0;
		}
	}, 3000);
	// 【数据安全区渲染】
	let dataArr = [
		{
			imgUrl: "../imgs/security-logo-item01.svg",
			info: "高新技术企业",
		},
		{
			imgUrl: "../imgs/security-logo-item02.svg",
			info: "CMMI3",
		},
		{
			imgUrl: "../imgs/security-logo-item03.png",
			info: "ISO9001",
		},
		{
			imgUrl: "../imgs/security-logo-item04.png",
			info: "ISO20000",
		},
		{
			imgUrl: "../imgs/security-logo-item05.png",
			info: "ISO27001",
		},
		{
			imgUrl: "../imgs/security-logo-item06.png",
			info: "网络安全三级等保",
		},
	];
	let dataHtml = "";
	dataArr.forEach((v, i) => {
		dataHtml += `<li>
		<p class="img-w-h"> <img src="${v.imgUrl}" alt="图片已损坏"></p>
		<p>${v.info}</p>
	</li>`;
	});
	$("#dataList").innerHTML = dataHtml;
	//【回到顶部】
	$(".goTop").style.opacity = "0" ;
	this.addEventListener("scroll",function(){
		if ($(".goTop") < 3000 ) {
			$(".goTop").style.opacity = "0" ;
		}else{
			$(".goTop").style.opacity = "1" ;
		}
	})
	$(".goTop").addEventListener("click",function(){
		window.scroll({
			top: 0,
			left: 0,
			behavior: 'smooth',
		  });
	})
});
